<script setup lang="ts">
import { ref } from 'vue'
import { useMemberStore } from '@/stores'

const memberStore = useMemberStore()
const emit = defineEmits(['handleSelect'])

const props = defineProps<{
  totalPrice: number
}>()

function open() {
  popup.value?.open()
}
function close() {
  popup.value?.close()
}
const popup = ref<{
  open: () => void
  close: () => void
}>()
// 选择
const handleSelect = (type: number) => {
  emit('handleSelect', type)
}

const show = ref(false)
defineExpose({
  open,
  close,
})
</script>

<template>
  <uni-popup ref="popup" type="bottom" :safe-area="false">
    <view class="popup-box">
      <view
        class="popup-item"
        :class="Number(memberStore.balanceInfo?.totalBalance) >= props.totalPrice ? '' : 'opacity'"
        @click="handleSelect(0)"
      >
        <image src="/static/images/yue.png" />
        <view class="payText">余额支付 （剩余￥{{ memberStore.balanceInfo?.totalBalance }}）</view>
      </view>
      <up-line color="rgba(0, 0, 0, 0.1)"></up-line>
      <view class="popup-item" @click="handleSelect(1)">
        <image src="/static/images/weixin.png" style="width: 44rpx; height: 44rpx" />
        <view class="payText">微信支付</view>
      </view>
      <view class="line"></view>
      <view class="cancel" @click="close">取消</view>
    </view>
  </uni-popup>
</template>

<style lang="scss" scoped>
.popup-box {
  height: 468rpx;
  background: #fff;
  border-radius: 32rpx 32rpx 0px 0px;
  padding-bottom: 68rpx;
  .popup-item {
    width: 100%;
    height: 148rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 56rpx;
      height: 56rpx;
      margin-right: 16rpx;
    }
    color: rgba(0, 0, 0, 0.9);
    font-family: 'PingFang SC';
    font-size: 30rpx;
    font-style: normal;
    font-weight: 400;
  }
  .line {
    width: 100%;
    height: 16rpx;
    background: #f5f5f5;
  }
  .cancel {
    width: 100%;
    text-align: center;
    height: 96rpx;
    line-height: 96rpx;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
  }
}
.opacity {
  opacity: 0.7;
}
</style>
